<template>
  <view class="message-page">
    <!-- nav -->
    <tui-navigation-bar :isOpacity="false" color="#333" class="nav">
      <view class="nav-content">
        <view class="left">
          <xboot-user-drawer />
          <text class="title">消息</text>
        </view>
        <view class="right">
          <tui-icon
            name="search"
            color="#333"
            size="25"
            unit="px"
            class="r"
            @click="toSearch"
          />
          <tui-icon
            name="add"
            color="#333"
            size="25"
            unit="px"
            class="r2"
            @click="openMore"
          />
        </view>
      </view>
    </tui-navigation-bar>
    <!-- 右上角弹框菜单 -->
    <tui-bubble-popup
      :show="showMore"
      :showTriangle="false"
      maskBgColor="rgba(0, 0, 0, 0)"
      shadow
      backgroundColor="#fff"
      @close="openMore"
      width="153px"
      right="8px"
      :top="moreTop"
    >
      <view class="menu-item border-top" @click="scan">
        <view class="iconfont icon-scan" />
        <text class="txt">扫一扫</text>
      </view>
      <view class="menu-item">
        <view class="iconfont icon-comment" /><text class="txt">发起群聊</text>
      </view>
      <view class="menu-item border-bottom">
        <view class="iconfont icon-adduser" />
        <text class="txt">添加好友</text>
      </view>
      <view class="menu-item border-bottom">
        <view class="iconfont icon-videocameraadd" />
        <text class="txt">发起会议</text>
      </view>
    </tui-bubble-popup>
    <!-- tab -->
    <tui-tabs
      :tabs="tabs"
      :currentTab="currentTab"
      @change="changeTab"
      isFixed
      :top="tabTop"
      :padding="10"
      class="tabs"
    />
    <!-- content -->
    <view class="content">
      <!-- list -->
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="actions" @click="handleAction" @change="swipeChange">
          <view class="chat-list-item" @click="toChat(0)">
            <view class="icon">
              <image src="@/static/app/通讯录.png" class="img" />
            </view>
            <view class="detail">
              <view class="top">
                <view class="title ellipsis">Exrick的技术交流群</view>
                <view class="time">12:33</view>
              </view>
              <view class="bottom">
                <view class="desc">Exrick：晚上一起吃饭！</view>
                <view class="badge">
                  <tui-badge type="danger">3</tui-badge>
                </view>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="actions" @click="handleAction" @change="swipeChange">
          <view class="chat-list-item" @click="toChat(1)">
            <view class="icon">
              <image src="@/static/app/爱心.png" class="img" />
            </view>
            <view class="detail">
              <view class="top">
                <view class="title ellipsis">XBoot官方助手</view>
                <view class="time">12:33</view>
              </view>
              <view class="bottom">
                <view class="desc">[图片]</view>
                <view class="badge">
                  <tui-badge type="danger" dot></tui-badge>
                </view>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="actions" @click="handleAction" @change="swipeChange">
          <view class="chat-list-item" @click="toChat(2)">
            <view class="icon">
              <image src="@/static/avatar2.png" class="img" />
            </view>
            <view class="detail">
              <view class="top">
                <view class="title ellipsis">Exrick</view>
                <view class="time">12:53</view>
              </view>
              <view class="bottom">
                <view class="desc">今晚有空吗？</view>
                <view class="badge">
                  <!-- <tui-badge type="danger" dot></tui-badge> -->
                </view>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <!-- loadmore -->
      <tui-loadmore v-show="loading" />
    </view>
  </view>
</template>

<script>
import { openScan } from "@/common/js/scan.js";
export default {
  data() {
    return {
      moreTop: "50px",
      showMore: false,
      tabTop: 88,
      tabs: [
        {
          name: "全部消息",
        },
        {
          name: "@我",
          isDot: true,
        },
        {
          name: "未读",
        },
        {
          name: "私聊",
        },
        {
          name: "稍后处理",
        },
      ],
      currentTab: 0,
      actions: [
        {
          text: "置顶",
          style: {
            backgroundColor: "#198fff",
            fontsize: "15px",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#ed4014",
            fontsize: "15px",
          },
        },
      ],
      loading: false,
      hasOpen: false,
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      uni.getSystemInfo({
        success: (res) => {
          this.tabTop = res.statusBarHeight + 44;
          this.moreTop = res.statusBarHeight + 50 + "px";
        },
      });
    },
    openMore() {
      this.showMore = !this.showMore;
    },
    changeTab(v) {
      this.currentTab = v.index;
    },
    handleAction(v) {
      if (v.index == "0") {
      } else if (v.index == "1") {
      }
    },
    swipeChange(v) {
      setTimeout(() => {
        if (v == "none") {
          this.hasOpen = false;
        } else {
          this.hasOpen = true;
        }
      }, 300);
    },
    toSearch() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    scan() {
      openScan();
    },
    toChat(v) {
      if (this.hasOpen) {
        return;
      }
      let data = {};
      if (v == 0) {
        data = {
          title: "Exrick的技术交流群",
          desc: "",
          type: "1",
        };
      } else if (v == 1) {
        data = {
          title: "XBoot官方助手",
          desc: "官方账号",
          type: "0",
        };
      } else if (v == 2) {
        data = {
          title: "Exrick",
          desc: "",
          type: "2",
        };
      }
      uni.navigateTo({
        url: `/pages/message/chat/chat?title=${data.title}&desc=${data.desc}&type=${data.type}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./message.scss";
</style>
